<template>
    <div class="msite">
      <city-header>搜索</city-header>
      <city-search :cities="cities"></city-search>
      <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
      <Alphabit :cities="cities" @change="handlist"></Alphabit>
    </div>
</template>

<script>
  import CityHeader from './components/CityHeader.vue'
  import CitySearch from './components/Sreach.vue'
  import CityList from './components/List.vue'
  import Alphabit from './components/Alphabit.vue'
  import {getCity} from '../../api'
    export default {
        data() {
          return {
            cities:{},
            hotCities:[],
            letter:''
          }
        },
      components:{
        CityHeader,
        CitySearch,
        CityList,
        Alphabit
      },
      created(){
        this.getList()
      },
      methods:{
        async getList(){
          let city= await getCity();
          console.log(city)
          this.cities = city.data.cities;
          this.hotCities = city.data.hotCities

        },
        handlist(letter){
           this.letter = letter;
        }
      }
    }
</script>

<style>

</style>
